<template>
  <div class="role-box">
    <div class="left">
      <div class="header">
        <el-input
          v-model="keyword"
          style="width: 200px"
          placeholder="搜索角色"
          :suffix-icon="Search"
          @keyup.enter="searchRole"
        />
        <el-icon @click="openModel" :size="20"><Plus /></el-icon>
      </div>
      <div class="content">
        <div
          v-for="(item, index) in roleList"
          :key="index"
          class="role-item"
          :class="{ current: currentRole.id === item.id }"
          @click="clickRole(item)"
        >
          <span class="text"> {{ item.name }}</span>
          <el-icon color="#18263c" class="icon" @click.stop="openOperateRole($event, item)"><Expand /></el-icon>
        </div>
        <ul v-if="showContext" :style="{ left: left + 'px', top: top + 'px' }">
          <li @click.stop="operateRole('edit')">编辑角色</li>
          <li @click.stop="operateRole('delete')">删除角色</li>
        </ul>
      </div>
    </div>
    <div class="right">
      <div class="header">
        <span>{{ currentRole.name }}</span>
      </div>
      <div class="search">
        <div>
          <el-input
            v-model="keywordUser"
            style="width: 200px"
            placeholder="搜索人员"
            :suffix-icon="Search"
            @keyup.enter="searchUSer()"
          />
        </div>
        <div>
          <el-button type="primary" @click="addUser()">添加用户</el-button>
        </div>
      </div>
      <div class="table-box">
        <el-table :data="userList.data" border style="width: 100%; height: 100%">
          <el-table-column type="index" label="序号" width="100" />
          <el-table-column prop="name" label="姓名" />
          <el-table-column prop="tel" label="电话" />
          <el-table-column prop="email" label="邮箱" />
        </el-table>
      </div>
    </div>
  </div>
  <Model
    type="delete"
    title="是否确认删除？此操作不可撤回"
    v-model="modelValue2"
    @onClose="modelValue2 = false"
    @onOk="delOk"
  ></Model>
  <Model title="添加角色" v-model="modelValue" @onClose="closeModel" @onOk="addRole">
    <div class="body">
      <p class="label">请输入角色名称</p>
      <el-input v-model="input2" placeholder="请输入角色名称" />
    </div>
  </Model>
  <UserSelect
    title="分配用户"
    v-model="modelValue3"
    :selectUser="userList.data"
    :selectUserId="userID"
    v-if="modelValue3"
    @onClose1="onClose1"
    @onOk1="onOk1"
  >
  </UserSelect>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive, computed, watch } from 'vue'
import { getRoleApi, addRoleApi, delRoleApi, searchRoleApi, getUsersByRole, addUsersByRole } from '@/api/role'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Expand, Plus } from '@element-plus/icons-vue'
import Model from '@/components/UnModel/index.vue'
import UserSelect from '@/components/UserMultiple/index.vue'
const keyword = ref('')
// 搜索
const searchRole = async () => {
  const param = { name: keyword.value }
  const res = await searchRoleApi(param)
  if (res.code === 200) {
    roleList.value = res.data
  }
}
const modelValue = ref<Boolean>(false)
const roleList = ref<any>([])
// 关闭
const closeModel = () => {
  modelValue.value = false
  input2.value = ''
  currentData.id = ''
}
//打开添加角色框
const openModel = () => {
  modelValue.value = true
  input2.value = ''
  currentData.id = ''
}
// 1.获取角色列表
const getData = async () => {
  const res = await getRoleApi()
  if (res.code === 200) {
    roleList.value = res.data
    clickRole(roleList.value[0])
  }
}
// 2.添加角色
const input2 = ref<String>('')
const addRole = async () => {
  const param = {
    name: input2.value,
    id: currentData.id
  }
  const res = await addRoleApi(param)
  if (res.code === 200) {
    ElMessage({
      message: currentData.id ? ' 编辑成功' : '添加成功',
      type: 'success'
    })
    closeModel()
    getData()
  }
}
// 编辑或删除角色
let showContext = ref(false)
let currentData = reactive({ name: '', id: '' }) //要操作的数据
let left = ref<Number>(0)
let top = ref<Number>(0)
const openOperateRole = (e, val) => {
  showContext.value = true
  left.value = e.clientX - 130
  top.value = e.clientY + 10
  currentData = val
}
document.addEventListener('click', function (e) {
  showContext.value = false
})
const modelValue2 = ref(false)
const operateRole = (val) => {
  if (val === 'edit') {
    modelValue.value = true
    input2.value = currentData.name
  } else {
    modelValue2.value = true
  }
}
const delOk = async () => {
  const param = { id: currentData.id }
  const res = await delRoleApi(param)
  if (res.code === 200) {
    ElMessage({ message: '删除成功', type: 'success' })
    modelValue2.value = false
    getData()
  }
}
//监听单个ref定义的值
watch(keyword, (newValue, oldValue) => {
  if (newValue === '') {
    searchRole()
  }
})

// 点击角色
const keywordUser = ref('')
const currentRole = reactive({ id: '', name: '' })
const userList = reactive({ data: [] })
const clickRole = async (item:any) => {
  currentRole.id = item.id
  currentRole.name = item.name
  const res = await getUsersByRole({ id: currentRole.id, userName: keywordUser.value })
  if (res.code === 200) {
    userList.data = res.data
  }
}
//绑定用户
const modelValue3 = ref<Boolean>(false)
const userID = ref<Array>([])
const addUser = () => {
 // 打开用户弹窗组件 传入已选人员Id
  modelValue3.value = true
  userID.value = []
  userList.data.forEach((item) => {
    userID.value.push(item.id)
  })
}
const onClose1 = () => {
  modelValue3.value = false
}
// userList 选中的人员绑定用户 确定
const onOk1 = async (userList) => {
  modelValue3.value = false
  const ids = []
  userList.forEach((item:any) => {
    ids.push(item.id)
  })
  const param = { roleId: currentRole.id, userId: ids }
  const res = await addUsersByRole(param)
  if (res.code === 200) {
    clickRole(currentRole)
  }
}

const searchUSer = async () => {
  ElMessage({ message: '待开发', type: 'success' })
}

onMounted(() => {
  getData()
})
</script>
<style lang="scss" scoped>
.role-box {
  display: flex;
  height: 100%;
  .left {
    width: 260px;
    border-right: 1px solid #dddddd;
    .header {
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
    }
    .content {
      height: calc(100% - 50px);
      overflow: scroll;
      .role-item {
        height: 40px;
        display: flex;
        align-items: center;
        padding: 10px;
        width: 100%;
        cursor: pointer;
        &:hover {
          background: #eff0f1;
        }
        span {
          display: inline-block;
          width: 90%;
        }
        .icon {
          &:hover {
            color: #3370ff;
          }
        }
      }
      ul {
        position: absolute;
        background: #fff;
        border: 1px solid #dddddd;
        border-radius: 4px;
        width: 127px;
        li {
          cursor: pointer;
          padding: 7px 5px;
          &:hover {
            background: #eff0f1;
          }
        }
      }
      .current {
        background-color: rgba(51, 112, 255, 0.3) !important;
      }
    }
  }
  .right {
    width: calc(100% - 260px);
	height: 100%;
	overflow: hidden;
    .header {
      margin: 10px 10px;
    }
    .search {
      display: flex;
      justify-content: space-between;
      margin: 10px;
    }
    .table-box {
      margin: 10px;
	  height: calc(100% - 100px);
    }
  }
}
.body {
  padding: 15px;
  .label {
    margin-bottom: 15px;
  }
}
</style>
